<template>
  <div class="photosinfo">
    <h3>{{getinfo.title}}</h3>
    <p>
        <span>发表时间:{{getinfo.add_time | timeFilter}}</span>
        <span>点击: {{getinfo.click}}次</span>
    </p>
    <hr>
    <!-- 缩略图区域 -->
    <img class="preview-img"
                  v-for="(item, index) in getphoto"
                  :key="index"
                  :src="item.src" height="100" 
                  @click="$preview.open(index, getphoto)">

    <div class="photoinfocontent" v-html="getinfo.content"></div>
    <!-- 评论子组件区域 -->
    <commentinfo :id="id"></commentinfo>
  </div>
</template>
<script>
import commentinfo from '../../components/subcomment/CommentZ.vue';
export default {
  data() {
    return {
      id: this.$route.params.id,
      getinfo:{},
      getphoto:[]
    };
  },
  components:{
      commentinfo
  },
  created(){
      this.getphotosinfo();
      this.getpreview();
  },
  methods:{
      getphotosinfo(){
          this.$http.get('api/getimageInfo/'+this.id).then((res)=>{
            //   console.log(res.body);
              if(res.body.status === 0){
                  this.getinfo = res.body.message[0]
              }
          })
      },
      getpreview(){
          this.$http.get('api/getthumimages/'+this.id).then((res)=>{
            //    console.log(res.body);
               if(res.body.status===0){
                    res.body.message.forEach(function(item) {
                        item.w = 600;
                        item.h = 400;
                    });
                   this.getphoto = res.body.message
               }
          })
      }
  }
}
</script>
<style lang="scss" scoped>
  .photosinfo{
      padding: 5px;
      h3{
          text-align: center;
          color: rgb(118, 209, 245);
      }
      p{
          display: flex;
          justify-content: space-between;
      }
      .photoinfocontent{
          font-size: 14px;
          margin-bottom: 20px;
      }
      .preview-img{
        margin: 5px;
        text-align: center;
     }
  }
</style>